<template>
  <div style="height:525px;">
    <div style="display: flex;justify-content: space-between;align-items: center">
      <!-- <div style="font-weight: 500;font-size: 18px;color: #222B3C;">
        请选择数据源关联的出参字段
      </div> -->
      <div style="font-weight: 500;font-size: 18px;color: #222B3C;">
        <a-select
          style="width:200px"
          v-model="formData.dataSourceId"
          @change="datasourceListChange"
          :filter-option="false"
          @search="queryDatasourceList"
          @focus="queryDatasourceList"
          allow-search
          allow-clear>
          <a-option
            v-for="item in dataSourceList"
            :key="item.dataId"
            :value="item.dataId"
            :title="item.dataName">
            {{ item.dataName }}
          </a-option>
        </a-select>
      </div>
      <div>
        <svg style="color: #97999C;font-size: 14px;" class="icon" aria-hidden="true" @click="dataPopCancel">
          <use xlink:href="#icon-cuowu"></use>
        </svg>
      </div>
    </div>
    <div style="height:440px;display: flex;gap: 0px 16px;margin: 12px 0px;">
      <div style="background: #F7F8FA;height: 100%;width:404px;padding: 12px 16px;">
        <div style="font-weight: 500;font-size: 16px;color: #222B3C;margin-bottom: 12px;">入参</div>
        <div class="scroll-container" style="height: 380px;">
          <div v-for="(item,index) in formData.queryGroupReqDTOList" :key="index">
            <div style="color: #222B3C;;font-size: 14px;font-weight: 500;line-height: 20px;height: 20px;margin: 14px 0px;">条件组{{ index+1 }}</div>
            <div style="margin-bottom: 16px;" v-for="(condition,conditionIndex) in item.tableQueryGroupAddDTOList" :key="conditionIndex">
              <div style="display: inline-block;height: 24px;background: #E8EEF4;border-radius: 8px;padding: 2px 12px;margin-bottom: 4px;">{{ condition.columnKey }}</div>
              <div>
                <a-input-group compact>
                  <a-select style="width:20%" v-model="condition.isChoose">
                    <a-option value="true">
                      选择
                    </a-option>
                    <a-option value="false">
                      手填
                    </a-option>
                  </a-select>
                  <a-select v-if="condition.isChoose==='true'" v-model="condition.dataIndex" style="width:80%">
                    <a-option v-for="option in pageNameList" :key="option.dataIndex" :value="option.dataIndex">
                      {{ option.name }}
                    </a-option>
                  </a-select>
                  <a-input v-else placeholder="请输入" v-model="condition.dataIndex" style="width:80%"/>
                </a-input-group>
              </div>
            </div>
            <a-divider :dashed="true"/>
          </div>
        </div>
      </div>
      <div style="background: #F1F7FF;height: 100%;width: 264px;padding:12px 16px;">
        <div style="font-weight: 500;font-size: 16px;color: #2983FF;margin-bottom: 12px;">出参</div>
        <div class="scroll-container" style="height: 380px;">
          <!-- @change="onChange" -->
          <a-radio-group style="width:100%" v-model="formData.ruleInfo">
            <div style="margin-bottom: 8px;padding: 6px 12px;height: 32px;border-radius: 4px;background: #FFFFFF;" v-for="item in dataShowFieldOptions" :key="item.columnAs">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-weight: 400;font-size: 14px;color: #222B3C;">{{ item.columnAs }}</div>
                <div>
                  <a-radio :value="item.columnAs"></a-radio>
                </div>
              </div>
            </div>
          </a-radio-group>

          <!-- <a-checkbox-group style="width:100%" v-model="formData.ruleInfo">
            <div style="margin-bottom: 8px;padding: 6px 12px;height: 32px;border-radius: 4px;background: #FFFFFF;" v-for="item in dataShowFieldOptions" :key="item.columnAs">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-weight: 400;font-size: 14px;color: #222B3C;">{{ item.columnAs }}</div>
                <div>
                  <a-checkbox :value="item.columnAs"></a-checkbox>
                </div>
              </div>
            </div>
          </a-checkbox-group> -->
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: flex-end;gap: 0px 8px;">
      <a-button @click="dataPopCancel">
        取消
      </a-button>
      <a-button type="primary" @click="handleOk">
        确定
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DataPop',
  data () {
    return {
      // queryGroupReqDTOList: [],
      dataShowFieldOptions: [],
      dataSourceList: [],
      pageNameList: [],
      visible: false
      // formData: {}
    }
  },
  inject: ['dataObj'],
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  mounted () {
    this.pageNameList = this.dataObj.pageData.filter(item => item.formData.dataIndex && item.formData.name).map(item => {
      return item.formData
    })
    if (this.formData.dataSourceId) { // 编辑
      this.queryDatasourceList()
      this.datasourceListChange(this.formData.dataSourceId, 'updata')
    }
  },
  methods: {
    handleOk (e) {
      this.$emit('ok', { 'dataShowFieldOptions': this.dataShowFieldOptions })
    },
    dataPopCancel (e) {
      this.$emit('cancel', {})
    },
    // 查询数据源列表
    async queryDatasourceList (dataName) {
      // try {
      //   const result = await this.$http.post(`/datasource/querySourceAllList`, {
      //       dataTypeList: ['select', 'selTable', 'interface'],
      //       dataName: dataName || ''
      //   })
      //   const { data } = result
      //   this.dataSourceList = data
      // } catch (e) {
      //   console.error('请求失败', e)
      // }
    },
    async datasourceListChange (dataId, type) {
      const result = await this.$http.get('/datasource/queryDataSourceDetail', {
        params: {
          dataId
        }
      })

      const { data } = result
      console.log(data, 'datadata')
      // data.dataSourceQueryDTO.dataName
      const { dataColumnQueryDTOList, aggregateFunctionInfoReqDTO, queryGroupReqDTOList } = data
      const { aggregateFunctionInfoAddDTOList } = aggregateFunctionInfoReqDTO || {}
      const mergedList = dataColumnQueryDTOList.concat(aggregateFunctionInfoAddDTOList || [])
      // 需要根据columnKey去重后的对象数组，而不是单纯的columnKey集合，可以进一步处理：
      this.dataShowFieldOptions = mergedList.filter((item, index, self) => {
          return index === self.findIndex((t) => t.columnAs === item.columnAs)
      })
      if (type !== 'updata') {
        this.$set(this.formData, 'queryGroupReqDTOList', queryGroupReqDTOList)
      } else {
        if (!Array.isArray(this.formData.queryGroupReqDTOList)) {
          const res = queryGroupReqDTOList.map(item => {
            return {
              tableQueryGroupAddDTOList: item.tableQueryGroupAddDTOList.map(item2 => {
                // let dataIndex = this.formData.queryGroupReqDTOList?[item2.groupId]?[item2.queryKey]
                let dataIndex = this.formData.queryGroupReqDTOList?.[item2.groupId]?.[item2.queryKey]
                let isChoose = 'false'
                const regex = /\$\{.*?\}/
                const isVariable = regex.test(dataIndex)
                if (isVariable) {
                  dataIndex = dataIndex.slice(2, -1)
                  isChoose = 'true'
                }
                return {
                  ...item2,
                  isChoose: isChoose,
                  dataIndex: dataIndex
                }
              }),
              tableQueryMappingAddDTO: item.tableQueryMappingAddDTO
            }
          })
          this.$set(this.formData, 'queryGroupReqDTOList', res)
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .arco-modal {
    border-radius:16px;
  }

  /deep/ .arco-modal-body {
    padding: 9px 24px;
  }

  /deep/ .arco-radio{
    margin-right:0px;
  }

  .scroll-container {
      overflow-x: auto;  /* 禁用横向滚动条 */
      overflow-y: auto;    /* 允许纵向滚动条 */
      // overflow-x: hidden;  /* 禁用横向滚动条 */

  }

  .scroll-container::-webkit-scrollbar {
      width: 8px; /* 定义滚动条宽度 */
      height: 8px; /* 定义横向滚动条高度 */
  }

  .scroll-container::-webkit-scrollbar-thumb {
      background: #BCBDBE; /* 滚动条颜色，可调整 */
      border-radius: 999px; /* 滚动条圆角 */
  }

  .scroll-container::-webkit-scrollbar-track {
      display: none; /* 隐藏滚动槽 */
  }

  .icon{
    cursor: pointer
  }
</style>
